<template>
  <back-btn></back-btn>
  <h2>Father</h2>
  <p>user: {{ user }}</p>
  <p>nameToRef: {{ nameToRef }}</p>
  <p>nameRef: {{ nameRef }}</p>

  <button @click="update">更新</button>

  <Child :name="nameToRef" />
</template>

<script lang="ts">
import { reactive, toRef, ref } from "vue";
import Child from "../components/toRefChild.vue";

export default {
  setup() {
    const user = reactive({
      name: "温情key",
      age: 22,
    });

    const nameToRef = toRef(user, "name");
    const nameRef = ref(user.name);

    const update = () => {
      user.name = user.name + "y";
      // nameToRef.value = nameToRef.value + 'y';
      nameRef.value = "ref拷贝一份新数据，不影响原对象数据";
    };

    return {
      user,
      nameToRef,
      nameRef,
      update,
    };
  },

  components: {
    Child,
  },
};
</script>
